<template>
<div>
    <div class=" my-clearfix" style="margin: 10px 0;" v-for="item in data" :key="item.userId">
        <div class=" fans-img"><el-avatar :size="60" :src="item.userImg"></el-avatar></div>
        <div class=" fans-info">
            <div>
                <span class=" fans-name" @click="nameClick(item.userId)">{{item.userNickName}}</span>
            </div>
            <div>
                <h4 class="fans-sign">{{item.description}}</h4>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:"fanList",
    props:{
        data:{
            type: Array
        }
    },
    methods:{
        nameClick(userId){
            if(userId===this.$route.query.userId){
            }else{
                this.$router.push({
                naem:"PersonalSpace",
                query:{
                    userId:userId
                }
            })
            }
        }
    }
}
</script>

<style>
.fans-img,.fans-info {
    float: left;
}
.fans-info {
    padding-left: 25px;
    margin-top: 10px;
}
.fans-name {
    transition: all 0.3s;
    font-weight: 400;
}
.fans-name:hover{
    color: skyblue;
    cursor: pointer;
}
.fans-sign {
    color: #666;
    font-size: 12px;
    line-height: 26px;
    height: 26px;
    width: 740px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>